<html>
    <head>
    
        <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 5px;
        padding: 0px
      }
    </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBfKE6Ncy85in6g8TBk7Umskb1EUzd1oMk&sensor=false"></script>
        <link rel="stylesheet" href="css/jquery-ui-1.8.18.custom.css"/>
        <script type="text/javascript">
            var map;
            var geocoder;

 

            
            function initialize()
            {
                var myLatlong   =   new google.maps.LatLng(-34.774530, -58.267114);
                var myOptions   =   {
                                        zoom:16,
                                        center:myLatlong,
                                        mapTypeId:google.maps.MapTypeId.ROADMAP
                                    };
               map          =   new google.maps.Map(document.getElementById('map_canvas'),myOptions);
               geocoder      =   new google.maps.Geocoder();   
            }
            
          $(document).ready(function(){
              $("#autocomplete").autocomplete({
                  source:function(request,response){
                      geocoder.geocode({'address':request.term},function(results){
                          response($.map(results,function(item){
                              return {
                                 label:item.formatted_address,
                                 value:item.formatted_address,
                                 latitude:item.geometry.location.lat(),
                                 longitude:item.geometry.location.lng(),
                              }
                              
                          }))
                      })
                 },
                  select:function(event,ui) {
                    var location    =   new google.maps.LatLng(ui.item.latitude,ui.item.longitude);
                    marker          =   new google.maps.Marker({
                        map:map,
                        draggable:true
                    })
                   var stringvalue     =   'latitude:<input type="text" value="'+ui.item.latitude+'" >Longitude:<input type="text" value="'+ui.item.longitude+'"><br/>';
                    $("#value").append(stringvalue);
                    marker.setPosition(location);
                    map.setCenter(location);
                    
                    
                }
                  
              })
          
            });
        </script>
    </head>



	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="stylesheet" href="inicio.css" type="text/css">
		<script> 
			function abrir() { 
			open('asignacion.html','1','top=10%,left=30%,width=50%,height=40%') ; 
			} 
		</script> 
	</head>

	<body>
						    <body onload="initialize()">
          
 
        <div id="map_canvas" style="width:50%;height:50%"> </div>
        
            </body>
        
		<form method="post" action="">
		<title>Mis Datos</title>

			<table>
				<caption id="titulotabla">
					<h1>Mis datos</h1>
  				</caption>
				<tr>
					<td>Nombre</td>
						<td>
							<input id="n_usuario" name="n_usuario" type="text" value="" spellcheck="false" class="">
						</td>
				</tr>
				<tr>
					<td>Apellido</td>
						<td>
							<input id="n_usuario" name="n_usuario" type="text" value="" spellcheck="false" class="">
						</td>
				</tr>
				<tr>
					<td>DNI</td>
						<td>
							<input id="n_usuario" name="n_usuario" type="text" value="" spellcheck="false" class="">
						</td>
				</tr>
				<tr>
					<td>Fecha de Nacimiento</td>
						<td>
							<input id="n_usuario" name="n_usuario" type="text" value="" spellcheck="false" class="">
						</td>
				</tr>
				<tr>
					<td>Dirección</td>
					<td><input type="text" id="autocomplete"></td>
					
					<td>coordenadas</td>
					<td> <div id="value"><tr>

        

            
        </div>



					<td colspan=2>
						<input type="submit" value="Guardar Cambios">
					</td>
				</tr>
				<tr>
					<td colspan=2>
						<input type="submit" value="Cancelar">
					</td>
				</tr>
			</table>
		</form>

	</body>
</html>